import React, { useCallback, useState,useContext,useEffect} from 'react'
import { MyWrapper } from './styledMy'
import dog from '@/assets/images/dog.jpg'
import list from '@/assets/images/list.png'
import readybuy from '@/assets/images/readybuy.png'
import readysend from '@/assets/images/readysend.png'
import readyreceive from '@/assets/images/readyreceive.png'
import card from '@/assets/images/card.png'
import talk from '@/assets/images/talk.png'
import money from '@/assets/images/money.png'
import message from '@/assets/images/message.png'
import addres from '@/assets/images/addres.png'
import right from '@/assets/images/right.png'
import { List } from 'antd-mobile';
import httpContext from '@/context/httpContext'
import { useHistory } from 'react-router-dom'
import { Toast} from 'antd-mobile';


export default function MyContainer() {
    const Item = List.Item;
    const Brief = Item.Brief;
    const {get} =useContext(httpContext)
    const history =useHistory()
    const [isShow,setIsShow]=useState(false)

    const handleClick=useCallback(
        (e)=>{
            return(e)=>{
                history.push('/mybuy')
            }
        }
    )
    const handleLogin=useCallback(
         ()=>{
             history.push('/login')
         },[]
    )

    useEffect(
        ()=>{
          if(document.cookie){
              setIsShow(true)
          }
          
        }
    )

    const handleLogout=useCallback(
        ()=>{
            if(document.cookie){
                cookie("username","",{
                'expires':-1
                })
                Toast.success('这就退了', 1);
                setTimeout(()=>{
                    location.reload();
                },1000)
                
            }else{
                Toast.success('能不能登录了在退出，嗯？？', 1);
            }
            

        }
    )

    const handleAddres=useCallback(
        ()=>{
            history.push('/addres')
        }
    )
    return (
        <MyWrapper>
            <h1>得物App</h1>
            <div className='userinfo'>
                <div className='u_img'>
                    <img src={dog} alt="" />
                </div>
                <div className='u_info'>
                    <div
                    className={isShow?'loginactive':'loginout'}                    >
                        <p className='username'>你真美</p>
                        <p className='info'>未设置签名</p> 
                    </div>
                   
                    <span className={isShow?'loginout':'login'}
                    onClick={handleLogin}
                    >
                        登录/注册
                    </span>
                </div>
            </div>
            <div className='line'></div>
            <List>
              
                <div className="myBuy">
                    <p className='top'>
                        <span>
                             <img src={list} alt="" />
                             购买</span>
                         <span className='order'
                         onClick={handleClick()}
                         >全部订单1 {'>'} </span>
                     </p>
                     <div className="li1">
                         <div
                            
                            className='aaad'
                         >
                             <div
                             onClick={handleClick()}
                             >
                                 <img src={readybuy} alt="" />
                                 <p>待付款</p>
                             </div>
                             <div
                             onClick={handleClick()}>
                                 <img src={readysend} alt="" />
                                 <p>待发货</p>
                             </div>
                             <div
                             onClick={handleClick()}>
                                 <img src={readyreceive} alt="" />
                                 <p>待收货</p>
                             </div>
                         </div>
                     </div>
                    </div>
                
                <Item
                    thumb={money}
                    onClick={() => { }}
                    arrow="horizontal"
                >
                    账户
                </Item>
                <Item
                    thumb={card}
                    onClick={() => { }}
                    arrow="horizontal"
                >
                    卡卷
                </Item>
                <Item
                    thumb={addres}
                    onClick={handleAddres}
                    arrow="horizontal"
                >
                    地址管理
                </Item>
                <Item
                    thumb={message}
                    onClick={() => { }}
                    arrow="horizontal"
                >
                    消息通知
                </Item>
                <Item
                    thumb={talk}
                    onClick={() => { }}
                    arrow="horizontal"
                >
                    客服中心
                </Item>
            </List>
            <div className='line'></div>
            <div className='logout'
            onClick={handleLogout}
            >
                <p>
                    退出登录
                </p>
            </div>
            <div className='line'></div>
        </MyWrapper>

    )
}

// const [dir,setDir]=useState('unactive')
// const handleClick=useCallback(
//     dir=>{
//         return ()=>{
//             setDir(dir)
//         }
//     }
// )
// return (
//     <MyWrapper>
//         <h1>得物App</h1>
//         <div className='userinfo'>
//             <div className='u_img'>
//                 <img src={dog} alt="" />
//             </div>
//             <div className='u_info'>
//                 <span className='username'>你真美</span>
//                 <span className='info'>未设置签名</span>
//             </div>
//         </div>
//         <div className='line'></div>
//         <div className='myBuy'>
//             <ul
//              onClick={handleClick('active')}
//             >
//                 <li className={dir==='active'?'active':''}>
//                     <p>
//                         <span>
//                             <img src={list} alt="" />
//                             购买</span>
//                         <span className='order'>全部订单1 {'>'} </span>
//                     </p>
//                     <div className="li1">
//                         <div>
//                             <div>
//                                 <img src={readybuy} alt="" />
//                                 <p>待付款</p>
//                             </div>
//                             <div>
//                                 <img src={readysend} alt="" />
//                                 <p>待发货</p>
//                             </div>
//                             <div>
//                                 <img src={readyreceive} alt="" />
//                                 <p>待收货</p>
//                             </div>
//                         </div>
//                     </div>
//                 </li>
//                 <li className={dir==='active'?'active':''}>
//                   <img src={money} alt="" />
//                   <span>账户</span>  
//                   <span className='right'>
//                       <img src={right} alt="" />
//                   </span>
//                 </li>
//                 <li className={dir==='active'?'active':''}>
//                 <img src={card} alt="" />
//                   <span>卡卷</span>  
//                   <span className='right'>
//                       <img src={right} alt="" />
//                   </span>
//                 </li>
//                 <li className={dir==='active'?'active':''}>
//                 <img src={addres} alt="" />
//                   <span>地址管理</span>  
//                   <span className='right'>
//                       <img src={right} alt="" />
//                   </span>
//                 </li>
//                 <li className={dir==='active'?'active':''}>
//                 <img src={message} alt="" />
//                   <span>消息通知</span>  
//                   <span className='right'>
//                       <img src={right} alt="" />
//                   </span>
//                 </li>
//                 <li className={dir==='active'?'active':''}>
//                 <img src={talk} alt="" />
//                   <span>客服中心</span>  
//                   <span className='right'>
//                       <img src={right} alt="" />
//                   </span>
//                 </li>
//             </ul>
//         </div>
//         <div className='line'></div>
//         <div className='logout'>
//             <p>
//                 退出登录
//             </p>
//         </div>
//     </MyWrapper>
// )
